import React, { Component } from "react"
import { observer, inject } from "mobx-react"
import { toJS } from "mobx"
import { Link, withRouter } from "react-router-dom"
import cssModules from "react-css-modules"
import { message, Checkbox } from "antd"
import AlarmTable from "./components/AlarmTable"
import More from "../More"
import ScreenModal from "../ScreenModal"
import classnames from "classnames"

import styles from "./index.less"

@inject("ScreenStore")
@observer
@cssModules(styles)
class AlarmWrap extends Component {
  constructor(props) {
    super(props)

    this.store = this.props.ScreenStore
  }
  handleClick = () => {
    const { confim } = this.store
    confim("alarm")
  }
  componentWillMount() {
    const { getAlarm } = this.store
    getAlarm()
  }
  render() {
    const { alarm } = this.store
    let data = toJS(alarm.dataList) || []
    let isAlarm = data.filter((item) => {
      return item.alarmLevel === "CRITICA"
    })

    return (
      <div
        className={classnames(
          styles["container"],
          isAlarm[0] && styles["container-alarm"]
        )}
        id={"alarm-wrap"}
      >
        <div styleName={"title-container"}>
          <div styleName={"title-selected"} />
          <div styleName={"title"}>告警</div>
        </div>
        {isAlarm[0] && <div styleName={"level-warning"}>警告！一级告警！</div>}
        {data[0] && (
          <AlarmTable dataSource={data} isScroll={true} dom={this.root} />
        )}
        <More handleClick={this.handleClick} isAlarm={isAlarm[0]} />
        <ScreenModal type={"alarm"} title={"告警"}>
          {data[0] && <AlarmTable dataSource={data} isAlarm={isAlarm[0]} />}
        </ScreenModal>
      </div>
    )
  }
}

export default AlarmWrap
